<!DOCTYPE html>

<html dir="ltr" lang="en-US">

   <head>

      <meta charset="UTF-8" />

      <title>A date range picker for Bootstrap</title>

      <link href="bootstrap.min.css" rel="stylesheet">

      <link href="font-awesome.min.css" rel="stylesheet">

      <link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" />

      <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

      <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

      <script type="text/javascript" src="moment.js"></script>

      <script type="text/javascript" src="daterangepicker.js"></script>
	<style>
    .daterangepicker.dropdown-menu.opensright{ display:block; border-radius:0}
	.daterangepicker.opensright:before,.daterangepicker.opensright:after{ display:none}
	.daterangepicker td.active{ position: relative}
	.daterangepicker td.gray_bg{
		background-color:#EAEAEA;
	}
    </style>
   </head>

   <body>



    <div  style="display:none">
    <input type="text" readonly style="width: 200px" name="birthday" id="birthday" class="form-control" value=""/>
    </div>

		
   <script type="text/javascript">

   $(document).ready(function() {

      $('#birthday').daterangepicker({
            singleDatePicker: true,
            format: 'YYYY-MM-DD',
            startDate: new Date(),
            //endDate: new Date(),
            maxDate:new Date(),
      },
      function(start, end, label) {
		$(".daterangepicker").show();
        console.log(start.toISOString(), end.toISOString(), label);

      });

   });
	
	$("td").addClass("gray_bg").attr("onclick","")
   </script>



   </body>

</html>

